<template>
    <div id="detail">
         <!-- 商品信息导航 -->
         <Detail-Nav-Bar class="detail-nav" @titleClick="titleClick" ref="detailnavbar"/>
      <!-- 可滚动区域 -->
      <Scroll class="detail-content" ref="scrolldata" :probe-type="3" :pull-up-load="true" @scroll='Btnxiaos'>
         <!-- 商品轮播图 -->
         <Detail-Swiper :top-images="topImages"/>
         <!-- 商品信息 -->
         <Detail-Base-Info :base-goods="goods"/>
         <!-- 店铺详细信息 -->
         <Detail-Shop-Info :shop-info="shop"/>
         <!-- 商品详细信息 -->
         <Detail-Goods-Info :goods-info="detailInfo" @imageLoad="imageLoad"/>
         <!-- 商品参数的信息 -->
         <Detail-Params-Info ref="params" :params-info="itemParams"/>
         <!-- 评论信息 -->
         <Detail-Comment-Info ref="comment" :comment-info="commentInfo"/>
         <!-- 推荐商品信息 -->
         <Product-List ref="product" :product="recommedIfo"/>
      </Scroll>
         <!-- 底部功能选项卡 -->
         <Detail-Bottom-Bar @addCart="addCartA"/>
         <!-- 购物车添加弹窗  v-show="gouwuactive" -->
         <Detail-GouWu-Tian-Jia ref="gouwuA"  :gou-wu-list="gouwuobj" @gwcxiaos="gwcxiaos" @getaddgouwu="getaddgouwu"/>  
         <!-- 回到顶部 想要组件的根元素上监听一个原生事件必须添加 native 事件修饰符 -->
         <Back-Top @click.native="backClick" v-show="activebackTop"/>
        
    </div>
</template>

<script>
// childComps 
 import DetailNavBar from './childComps/DetailNavBar'
 import DetailSwiper from './childComps/DetailSwiper'
 import DetailBaseInfo from './childComps/DetailBaseInfo'
 import DetailShopInfo from './childComps/DetailShopInfo'
 import DetailGoodsInfo from './childComps/DetailGoodsInfo'
 import DetailParamsInfo from './childComps/DetailParamsInfo'
 import DetailCommentInfo from './childComps/DetailCommentInfo'
 import DetailBottomBar from './childComps/DetailBottomBar'
 import DetailGouWuTianJia from './childComps/DetailGouWuTianJia'
 
 // 引入滚动 components/common
 import Scroll from 'components/common/scroll/Scroll'

 // components/content
 import ProductList from 'components/content/product/ProductList'
//  import BackTop from 'components/content/backTop/BackTop'

 // common/ 混入
 import { itemListenerMixin, backTopMixin} from 'common/mixin'

 // 防抖
 import { debounce } from 'common/antiShake'

 // vuex 
 import { mapActions } from 'vuex'

 // 网络请求
 import { 
   getDetail, 
   DetailGoods, 
   Shop,
   getRecommend,
   GouWU,
  } from 'network/detail' 

export default {
    name: 'Detail',
    data() {
      return{
      detailID:  null,         //  动态路由参数
      topImages: [],           //  商品轮播图数组
      goods: {},               //  商品信息对象,
      shop: {},                //  店铺信息
      detailInfo: {},          //  商品详细信息对象
      itemParams: {},          //  商品参数的信息, 尺码等
      commentInfo: {},         //  评论数据
      recommedIfo: [],         //  推荐商品信息
      themeTopYs: [],          //  详细页信息主题各个距离顶端的高度
      getThemeTopYs: null,     //  详细页信息的当前高度做一层防抖
      currentIndex: 0,
      gouwuobj: {},            //  购物车提示选项信息
   // gouwuactive: false,      //  购物车提示选项的显示
     }
    },
    mixins:[
      itemListenerMixin,
       backTopMixin
    ],
    components:{
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamsInfo,
      DetailCommentInfo,
      ProductList,
      DetailBottomBar,
      DetailGouWuTianJia,
      // BackTop,
      Scroll
    },
    created() {
      // 将传入的iid保存
            this.detailID = this.$route.params.iid
      // 根据iid请求详细数据
         getDetail(this.detailID).then(res => {
            console.log(res);
            const data = res.result
      //  将轮播图数据,并抽取出来存放到 topImagess数组
            this.topImages = data.itemInfo.topImages
      //  获取商品数据, 并抽取出来存放到 goods对象
            this.goods = new DetailGoods(data.itemInfo, data.columns, data.shopInfo.services)
            // console.log(this.detailgoods);
      //  获取店铺数据, 并抽取出来存放到 shop对象
            this.shop = new Shop(data.shopInfo)
      //  获取商品的详细信息, 并抽取出来存放到 detailInfo对象
            this.detailInfo = data.detailInfo
      //  获取商品参数的信息, 并抽取出来存放到 itemParams对象
            this.itemParams = data.itemParams
      //  获取评论的信息, 并抽取出来存放到 commentInfo对象
          if(data.rate.cRate !== 0){
            this.commentInfo = data.rate.list[0]
          }
      //  获取推荐数据请求
          getRecommend().then(res => {
            this.recommedIfo = res.data.list
           })
      //  详细页信息的当前高度做一层防抖
          this.getThemeTopYs = debounce(() => {         
            this.$nextTick(() => {
               // 商品参数的信息主题高度
               const params = (this.$refs.params.$el.offsetTop + 4)
               // 评论信息主题高度
               const comment = (this.$refs.comment.$el.offsetTop - 48)
               //  推荐商品信息主题高度
               const product = (this.$refs.product.$el.offsetTop - 44)
               //  默认最大值
               const maxvalue = Number.MAX_VALUE
               this.themeTopYs = []
               this.themeTopYs.push(0, params, comment, product, maxvalue)
               //  打印信息主题高度
                console.log(this.themeTopYs);
            })
          },200)
          
          //
          this.gouwuobj = new GouWU(data.itemInfo, data.itemParams, data.shopInfo, this.detailID)
               
            //   const product = {}
            //     product.iamge = this.topImages[0]
            //     product.title = this.goods.title
            //     product.desc = this.goods.desc
            //     product.price = this.goods.newPrice
            //     product.iid = this.detailID

     })
    
    },
    methods:{
      ...mapActions(['addCart']),
      imageLoad() {
          // 对应: 判断所有图片都加载完成, 在进行一次回调
          // this.$refs.scrolldata.refresh()

          // 使用混入的防抖函数
          this.refresh()
          // 调用防抖函数
          this.getThemeTopYs()
       },
       // 点击 Detail-Nav-Bar 商品导航信息,显示对应的主题方法
       titleClick(i) {
        //  console.log(i);
        this.$refs.scrolldata.scrollTo(0, -this.themeTopYs[i], 500)
       },
    //  Scroll 滚动事件监听
      Btnxiaos(weizi) {
         const weiziY = -weizi.y
        let length = this.themeTopYs.length
        for(let i= 0; i< length - 1; i++){
           if(this.currentIndex !== i && (weiziY >= this.themeTopYs[i] && weiziY < this.themeTopYs[i+1])) {
               this.currentIndex = i
               this.$refs.detailnavbar.currentIden = this.currentIndex
           }

       // BackTop button 隐藏判断 
       // 混入 --- 根据滚动的当前位置和设定值 activebackTop 做一个判断, 实现是否隐藏
           this.btnYingChang(weizi)
        }
      },
      // 添加购物车事件监听
      addCartA() {
         console.log('添加购物车');
         this.$refs.gouwuA.gouwuactive = true
         if(this.$refs.gouwuA.gouwuactive === true) {
              setTimeout(() => {
                this.$refs.gouwuA.isgouBd = true
              },500)
         }
        //  this.gouwuactive = true 
      },
      gwcxiaos() {
         this.$refs.gouwuA.gouwuactive = false
      if(this.$refs.gouwuA.gouwuactive === false) {
        setTimeout(() => {
          this.$refs.gouwuA.isgouBd = false
        },100)    
      }
        //  this.gouwuactive = false 
      },
      getaddgouwu() {
        
         //  1. 获取购物车需要展示的信息
         //  console.log(this.gouwuobj.iid);

         this.addCart(this.gouwuobj).then(res => {
            this.$toast.show(res)
         })
         /*  判断 $store.state.cartList 购物车商品的数组长度
             1.  如果数组长度大于或者等于0, 代表添加购物车成功 
             2.  隐藏购物车信息选项弹窗
             3.  显示提示添加成功信息弹窗
             4.  添加定时器设定提示弹窗的显示时间
         */
        if(this.$store.state.cartList.length >= 0){ 
            this.$refs.gouwuA.gouwuactive = false
            setTimeout(() => {
               this.$refs.gouwuA.isgouBd = false
            },100)      
        }
      }
    },

    mounted() {},

  //  离开组件时监听
    deactivated() {
  //  取消全局事件的监听
      this.$bus.$off('itemImagesLoad', this.itemImgListener)
    }
}
</script>

<style scopde>
 #detail{
   position: relative;
   z-index: 99;
   background-color: #fff;
   height: 100vh;
 }
 /* .detail-nav{
   position: relative;
   z-index: 9;
   background-color: #fff;
 } */
 .detail-content{
  height: calc(100% - 44px - 49px); 
  overflow: hidden; 
 }
</style>